<!--<template>
    <div>
      <template v-for="navMenu in menuData">
        <el-submenu v-if="navMenu.children.length > 0" :index="'/'+navMenu.path">
          <template slot="title">
            <i :class="navMenu.icon"/>
            <span slot="title">{{navMenu.name}}</span>
          </template>
          <menu-tree :menuData="navMenu.children"/>
        </el-submenu>

        <el-menu-item v-else-if="!child.hidden" :index="child.path" :key="child.path">
          <i :class="child.iconCls?child.iconCls:[fa,fa-file]"/>
          <span slot="title">{{ $t(`routeName.${child.name}`) }}</span>
        </el-menu-item>
      </template>
    </div>


  &lt;!&ndash;<div class="navMenu">

    <template v-for="navMenu in menuData">
      &lt;!&ndash; 最后一级菜单 &ndash;&gt;
      <el-menu-item v-if="navMenu.children.length===0"
                    :index="'/'+navMenu.path"
      >
        <i :class="navMenu.icon"></i>
        <span slot="title">{{navMenu.name}}</span>
      </el-menu-item>

      &lt;!&ndash; 此菜单下还有子菜单 &ndash;&gt;
      <el-submenu v-if="navMenu.children.length!=0"
                  :index="'/'+navMenu.path">
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.name}}</span>
        </template>
        &lt;!&ndash; 递归 &ndash;&gt;
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </template>

  </div>&ndash;&gt;

</template>-->
<template>
    <div class="navMenu">

        <template v-for="navMenu in menuData">
            <!-- 最后一级菜单 -->
            <el-menu-item v-if="navMenu.children.length===0"
                          :index="navMenu.component"
                          :key="navMenu.id"
            >
                <i :class="navMenu.icon"></i>
                <span slot="title" @click="addName">{{navMenu.name}}</span>
            </el-menu-item>

            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="navMenu.children.length!==0"
                        :index="navMenu.component">
                <template slot="title">
                    <i :class="navMenu.icon"></i>
                    <span> {{navMenu.name}}</span>
                </template>
                <!-- 递归 -->
                <menuTree :menuData="navMenu.children"></menuTree>
            </el-submenu>
        </template>

    </div>
</template>

<script>

    export default {
        name: "menuTree",
        props: ["menuData"],
        methods:{
            addName(){
                console.log("a")
            }
        }
    }

</script>

<style scoped>

</style>
